<template>
    <a-layout>
            <div style="padding: 8px 20px">
                <a-breadcrumb :routes="routes">
                    <template slot="itemRender" slot-scope="{ route, params, routes, paths }">
                        <span v-if="routes.indexOf(route) === routes.length - 1">
                            {{ route.breadcrumbName }}
                        </span>
                        <router-link v-else :to="`/${paths.join('/')}`">
                            {{ route.breadcrumbName }}
                        </router-link>
                    </template>
                </a-breadcrumb>
            </div>
        <a-form v-if="forms.length > 0"  style="padding: 8px 20px" layout="inline">
            <a-form-item label="选择表单">
                <a-select style="min-width: 150px" :default-value="selectedForm['form_id']" @change="handleChange">
                    <a-select-option v-for="(form, index) in forms" :key="index" :value="form.form_id">
                        {{ form.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button @click="getFormData" type="primary" html-type="submit">
                    查询
                </a-button>
            </a-form-item>
        </a-form>
        <a-layout-content
                :style="{ margin: '10px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
            <a-table :columns="columns" :data-source="data">
                <a slot="name" slot-scope="text">{{ text }}</a>
            </a-table>
        </a-layout-content>
    </a-layout>
</template>
<script>

    export default {
        data() {
            return {
                data : [],
                forms: [],
                selectedForm: {},
                pageSqId: '',
                lastId: 0,
                pageSize : 30
            };
        },
        computed : {
            routes (){
                return this.$router.options.routes
            },
            columns() {
                if(!this.selectedForm.fields) {
                    return []
                }
                const fields = JSON.parse(this.selectedForm.fields);
                return fields.map((field) => {
                    return {
                        title: field.label,
                        dataIndex: field.field,
                        key: field.field,
                    }
                })
            }
        },
        async mounted() {
            this.pageSqId = this.$router.currentRoute.params["sq_id"]
            if (!this.pageSqId) {
                await this.$router.push("/");
                return
            }
            await this.getForms()
        },
        methods: {
            handleChange(formId){
                const _this = this
                this.forms.forEach(function (value) {
                    if (value.form_id === formId){
                        _this.selectedForm = value
                        return;
                    }
                })
            },
            async getForms (){
                this.forms = await this.$post('/api/form/list-by-page', {
                    'page_sq_id' : this.pageSqId
                });
                if (this.forms.length > 0 ){
                    this.selectedForm = this.forms[0]
                }
            },
            async getFormData(){
                this.data = await this.$post('/api/form/data-by-form-id', {
                    'form_id' : this.selectedForm['form_id'],
                    'last_id' : this.lastId,
                    'page_size' : 20
                });
                if(this.data.length > 0){
                    this.lastId = this.data[this.data.length - 1].key
                }
            }
        },
        watch: {
            selectedForm(value) {
                this.lastId = 0;
                this.getFormData()
            }
        }
    };
</script>
